<template>
  <div class="home" ref="up">
    <el-container>
      <el-aside :width="asideWidth" style="min-height: 100vh;background-color: #001529;">
        <div class="logo-container" style="text-align: center;line-height: 60px;border-radius: 10px;">
          <span style="font-size: 32px;font-family: '得意黑 斜体', sans-serif;font-weight: bold;color:  #81D4FA;" class="gradient-text">开源数据分析</span>
          <!-- <img src="@/assets/logo.png" alt="" style="width:200px;height: 60px;"> -->
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">数据展示</span>
            </template>
            <el-menu-item index="/index">index类型</el-menu-item>
            <el-menu-item index="/metric">metric类型</el-menu-item>
            <el-menu-item index="/network">network类型</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <i :class="collapseIcon" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:$route.path}">{{$route.meta.name}}</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- logo和个人信息 -->
          <div style="flex:1;width:0;display: flex; align-items: center; justify-content: flex-end;">
            <i class="el-icon-quanping" style="font-size: 26px; margin: 0 5px;" @click="handleFull"></i>
            <el-dropdown>
              <div style="display: flex;align-items: center; cursor: pointer;" >
                <!-- cursor:修改鼠标样式 -->
                <img :src="require('@/assets/defaultAvatar.png')" alt="" style="height: 40px;width:40px;border-radius: 50%;margin: 0 5px;">
                <span>{{username}}</span>
              </div>
              
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </el-header>
        <el-main>
          <div style="position: fixed; top:50%;right:20px;z-index: 1000;" >
            <el-button icon="el-icon-huidaodingbu" circle size="medium"  @click="backtoUp"></el-button>
            <div style="font-size: 10px;">回到顶部</div>
          </div>
          <ai-chat-window ref="chatWindow" />
          <el-button  @click="openChatWindow" icon="el-icon-wuguan" circle size="medium" type="primary" style="position: fixed;right: 20px;top:20%;"></el-button>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import AiChatWindow from '@/components/AiChatWindow.vue';


export default {
  name: 'HomeView',
  components: {
    AiChatWindow
  },
  data(){
    return{
      isFullScreen:false,
      alertInstance:null,
      isPortrait:false,
      asideWidth:'200px',
      isCollapse:false,
      collapseIcon:'el-icon-s-fold',
      username:JSON.parse(localStorage.getItem('username')||'{}'),
      zljr:'zljr'
    }
  },
  methods:{
    logout(){
      this.$request.post('/api/auth/logout').then(res=>{
        if(res.status === 200){
          this.$message.success('登出成功')
          localStorage.removeItem('user-data')
          localStorage.removeItem('username')
          this.$router.push('/login')
        }else{
          this.$message.error(res.msg)
        }
      })

    },
    showLandscapeAlert(){
     this.alertInstance= this.$alert('请将手机横屏以获得最佳观看体验','横屏提醒',{
          confirmButtonText:'知道了',
        });

    },
    checkOrientation(){
      this.isPortrait = window.orientation === 0 ||window.orientation === 180;
      if(this.isPortrait){
        this.showLandscapeAlert();
      }
      if(!this.isPortrait){
        const hasRefreshed = sessionStorage.getItem('hasRefreshed');
        if (!hasRefreshed) {
          // 如果没有刷新过，则刷新页面
          sessionStorage.setItem('hasRefreshed', 'true'); // 记录刷新状态
          window.location.reload();
        }
      }
    },
    openChatWindow() {
      this.$refs.chatWindow.toggleChatWindow();
    },
    handleCollapse(){

      this.isCollapse=!this.isCollapse,
      // 设置收缩，不收缩
      this.asideWidth=this.isCollapse?'64px':'200px'
      // 根据是否收缩来定asideWidth值，收缩的时候为64
      this.collapseIcon=this.isCollapse?'el-icon-s-unfold':'el-icon-s-fold'
    },
    handleFull(){
      if(this.isFullScreen){
        document.exitFullscreen();
        this.isFullScreen=false;
      }else{
        document.documentElement.requestFullscreen();
        this.isFullScreen=true;
      }
      
    },
    backtoUp(){
      this.$refs.up.scrollIntoView({
        behavior:'smooth'
      })
    }
  },
  mounted(){
    this.checkOrientation();
    window.addEventListener('orientationchange',this.checkOrientation);
  },
  beforeDestroy(){
    window.removeEventListener('orientationchange',this.checkOrientation);
  }
}
</script>
<style scoped>

.gradient-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* 让文本填充色透明，只显示背景色 */
  
  /* 渐变设置 */
  background-image: linear-gradient(to right,#81D4FA,#ff7e5f);
}
@font-face {
  font-family: "得意黑 斜体";
  font-weight: 400;
  src: url("../assets//fonts/huQeifSsQhGe/5yGBbXgA6nBw.woff2") format("woff2"),
  url("../assets//fonts/huQeifSsQhGe/5yGBbXgA6nBw.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "阿里妈妈数黑体 Bold";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/SaU2WQyv8xy0.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/KYnoIUtaLmbn.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "思源宋体 Bold";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/ZS6PMmXoBnQH.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/RdzsLL3cxMHV.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "阿里巴巴普惠体 2.0 95 ExtraBold";font-weight: 800;src: url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/rG1CRbI9Uaz5.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/h19gzwslrEHQ/HAKfectxStUZ.woff") format("woff");
  font-display: swap;
}
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-submenu__title:hover, .el-menu-item:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px;
  width: calc(100% - 4px);
  padding-left: 4px;
}

.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px;
}

.el-menu--inline {
  background-color: #000c17;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px;
}
/* 设置侧边栏收缩动画 */
.el-aside{

  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.el-header{
  height:60px;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}
</style>